<!DOCTYPE html>
<html  class="no-js" lang="en">
    <head>
        <title>Memories Lost</title>
		<meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="foundation/css/foundation.css" />
		<link rel="stylesheet" href="foundation-icons/foundation-icons.css" />	  
		<link rel="stylesheet" href="fonts.css" />
		<script src="foundation/js/vendor/modernizr.js"></script>
    </head>
	
    <body onload="displayContent('main_menu'); checkURI()" style="background-color: black;">
		<!-- BEGIN Audio stuff -->
		<audio id="bg_music" autoplay loop>
			<source src="music/01 - Opening.ogg" type="audio/ogg">
			Your browser does not support the audio element.
		</audio>
		
		<audio id="select_fx" >
			<source src="music/Select8-Bit.ogg" type="audio/ogg">
			Your browser does not support the audio element.
		</audio>

		<audio id="cancel_fx" >
			<source src="music/Cancel8-Bit.ogg" type="audio/ogg">
			Your browser does not support the audio element.
		</audio>	
		<!-- End Audio stuff -->		
		
<div id="main_menu" style="display: none">      <!-- BEGIN header -->
      <div class="row">
         <div class="small-12 columns small-centered">
            <h1 style="margin-top: -32px">Memories Lost</h1>            
         </div>         
      </div>       
      <div class="row">
         <div class="small-4 columns small-centered" style="margin-top: -36px">
            <h3 style="text-align:center">By Spaghetti Mafia</h3>
         </div>
      </div>      	  
      <!-- END header -->
      
      <!-- BEGIN menu buttons -->
      <div class="row">
         <div class="small-4 columns small-centered">
            <a onclick="select_fx.play(); localStorage.setItem('progress', '1');" class="small button expand radius gold_font" href="javascript:delayPage('prelevel.html?lvl=1')">New Game</a>
         </div>
      </div>
   
      <div class="row">
         <div class="small-4 columns small-centered">
            <a onclick="select_fx.play(); javascript:delayContent('level_select');" class="small button expand radius gold_font">Level Select</a>
         </div>
      </div>
      
      <div class="row">
         <div class="small-4 columns small-centered">
            <a onclick="select_fx.play(); javascript:delayContent('controls')" class="small button expand radius gold_font">Controls</a>
         </div>
      </div>
      <!-- END menu buttons -->      
      
      <!-- BEGIN versioning -->
      <div class="row">
         <div class="small-1 small-push-8 columns small-right gold_font">v0.1</div>
      </div>      
      <!-- END versioning -->	  
</div>

<div id="level_select" style="display: none">
      <!-- BEGIN header -->
      <div class="row">
         <div class="small-12 columns small-centered">
            <h1 style="margin-top: -32px">Memories Lost</h1>            
         </div>         
      </div>   
      <div class="row">
         <div class="small-4 columns small-centered" style="margin-top: -36px">
            <h3 style="text-align:center">By Spaghetti Mafia</h3>
         </div>
      </div>      
      <!-- END header -->
      
      <!-- BEGIN levels 1-4 selection -->
      <div class="row">
         <div class="small-7 columns small-centered">
            <ul class="small-block-grid-4 small-centered">
               <li><a id="l1" class="small button radius gold_font alert disabled" href="#">1</a></li>
               <li><a id="l2" class="small button radius gold_font alert disabled" href="#">2</a></li>
               <li><a id="l3" class="small button radius gold_font alert disabled" href="#">3</a></li>
               <li><a id="l4" class="small button radius gold_font alert disabled" href="#">4</a></li>               
            </ul>
         </div>
      </div>
      <!-- END levels 1-4 selection -->
      
      <!-- BEGIN levels 5-8 selection -->
      <div class="row" style="margin-top:-10px">
         <div class="small-7 columns small-centered">
            <ul class="small-block-grid-4 small-centered">
               <li><a id="l5" class="small button radius gold_font alert disabled" href="#">5</a></li>
               <li><a id="l6" class="small button radius gold_font alert disabled" href="#">6</a></li>
               <li><a id="l7" class="small button radius gold_font alert disabled" href="#">7</a></li>
               <li><a id="l8" class="small button radius gold_font alert disabled" href="#">8</a></li>               
            </ul>
         </div>
      </div>
      <!-- END levels 5-8 selection -->
      
      <!-- BEGIN back button -->
      <div class="row">
         <div class="small-2 columns small-centered">
            <a onclick="cancel_fx.play(); javascript:delayContent('main_menu')" class="small button radius gold_font" style="margin-top: -20px">Back</a>
         </div>
      </div>            
      <!-- END back button -->
</div>

<div id="controls" style="display: none">
      <!-- BEGIN header -->
      <div class="row">
         <div class="small-12 columns small-centered">
            <h1 style="margin-top: -32px">Memories Lost</h1>            
         </div>         
      </div>   
      <div class="row">
         <div class="small-4 columns small-centered" style="margin-top: -36px">
            <h3 style="text-align:center">By Spaghetti Mafia</h3>
         </div>
      </div>      
      <!-- END header -->
      
      <!-- BEGIN Controls -->
      <div class="row">
         <div class="small-2 small-push-2 columns settings">
			<h6>Control</h6>
		 </div>
		 
		 <div class="small-2 small-push-3 columns settings">
			<h6>Mobile</h6>
		 </div>
		 
		 <div class="small-2 small-pull-2 columns settings">
			<h6>Desktop</h6>
		 </div>
	  </div>
	  
	  <hr style="margin-top:-24px; margin-bottom=-24px">
	  
	  <div class="row">
         <div class="move_up small-2 small-push-2 columns">
			<h6 style="text-align:center"><i class="fi-arrow-left"></i></h6>
		 </div>
		 
		 <div class="move_up small-2 small-push-3 columns">
			<h6>'&lt;'&nbsp;&nbsp;Button</h6>
		 </div>		 
		 <div class="move_up small-2 small-pull-2 columns">
			<h6>Left Key</h6>
		 </div>	  
	  </div>
	  
	  <div class="row">
         <div class="move_up small-2 small-push-2 columns">
			<h6 style="text-align:center"><i class="fi-arrow-right"></i></h6>
		 </div>
		 
		 <div class="move_up small-2 small-push-3 columns">
			<h6>'&gt;'&nbsp;&nbsp;Button</h6>
		 </div>		 
		 <div class="move_up small-2 small-pull-2 columns">
			<h6>Right Key</h6>
		 </div>	  
	  </div>
	  
	  <div class="row">
         <div class="move_up small-2 small-push-2 columns">
			<h6 style="text-align:center">Jump</h6>
		 </div>
		 
		 <div class="move_up small-2 small-push-3 columns">
			<h6>'b' Button</h6>
		 </div>		 
		 <div class="move_up small-2 small-pull-2 columns">
			<h6>'x' Key</h6>
		 </div>	  
	  </div>	  
	  
	  <div class="row">
         <div class="move_up small-2 small-push-2 columns">
			<h6 style="text-align:center">Dash/Sprint</h6>
		 </div>
		 
		 <div class="move_up small-2 small-push-3 columns">
			<h6>'a' Button</h6>
		 </div>		 
		 <div class="move_up small-2 small-pull-2 columns">
			<h6>'z' Key</h6>
		 </div>	  
	  </div>	  	  
	  	  	  	  
      <!-- END Controls-->      
      
      <!-- BEGIN back button -->
      <div class="row">
         <div class="small-2 columns small-centered">
            <a onclick="cancel_fx.play(); javascript:delayContent('main_menu')" class="small button radius gold_font" style="margin-top: -0px">Back</a>
         </div>
      </div>            
      <!-- END back button -->   
</div>

		<!-- Level Select/Progress Script -->
		<script type="text/javascript">
			var level = localStorage.getItem("progress");
				
			if (level == null) {
				localStorage.setItem("progress", "1");									
			}
					
			var level_num = parseInt(level);
				
			for (var ndx = 1; ndx <= 8; ndx++) {					
				var id = 'l' + ndx;
				var e = document.getElementById(id);
					
				if (ndx <= level_num) {
					e.setAttribute("class", "small button radius gold_font");
					var level_url = "javascript:delayPage('prelevel.html?lvl="+ndx+"')";
					e.setAttribute("href", level_url);
					e.setAttribute("onclick","select_fx.play()");						
				}
				else {
					e.setAttribute("class", "small button radius gold_font alert disabled");
					e.setAttribute("href", "/");
					e.setAttribute("onclick","return false;");
				}
			}
		</script>

		<!-- Various Page Scripts -->
		<script type="text/javascript">			
			bg_music.volume=.7;

			//Array of content ids that are hidden/displayed
			var pages = ['main_menu', 'level_select', 'controls'];		
			
			//@id 	The HTML element ID that you want to set visible
			function displayContent(id) {
				for (var ndx = 0; ndx < pages.length; ndx++) {
					if (id == pages[ndx]) {
						document.getElementById(pages[ndx]).style.display =  'block';
					}
					else {
						document.getElementById(pages[ndx]).style.display =  'none';
					}
				}
			}
			
			//@id	The HTML element ID that you want to be delayed
			function delayContent (id) {
				setTimeout( displayContent(id), 200 );
			}
			
			//@URL	The URL of the page to go to.
			function delayPage(URL) {
				setTimeout( function() {window.location = URL}, 200 );
			}			
			
						
			function checkURI() {				
				var parts = window.location.search.substr(1).split("&");
				var $_GET = {};
				for (var i = 0; i < parts.length; i++) {
					var temp = parts[i].split("=");
					$_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
				}				
				
				var beatLevel = false;
				if ($_GET['content'] == "level_select") {
					beatLevel = true;
				}
				
				for (var ndx = 0; ndx < pages.length && beatLevel; ndx++) {
					if ($_GET['content'] == pages[ndx]) {
						document.getElementById(pages[ndx]).style.display =  'block';
					}
					else {
						document.getElementById(pages[ndx]).style.display =  'none';
					}
				}
				window.history.replaceState("html", "Memories Lost", "/memorieslost/");
			}				
		</script>		
		<!-- END Page Scripts -->		
	
    </body>
</html>
